<template>
    <div class="per">
        <h1>接口，泛型，自定义类型</h1>
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="updateName">修改姓名</button>
        <button @click="updateAge">修改年龄</button>
    </div>
</template>

<script setup lang="ts" name="Person">
import {ref} from "vue";
import  {type PersonInter,type Persons} from "@/types";

let person:PersonInter = {id: 'flafjla',name: 'zs',age: 22}
let personList:Array<PersonInter> = [
    {id: 'flafjla',name: 'zs',age: 22},
    {id: 'flafjla',name: 'zs',age: 22},
    {id: 'flafjla',name: 'zs',age: 22}
]

let personList1:Persons = [
    {id: 'flafjla',name: 'zs',age: 22},
    {id: 'flafjla',name: 'zs',age: 22},
    {id: 'flafjla',name: 'zs',age: 22}
]


let name = ref('zs')
let age = ref(10)

function updateName() {
    name.value = 'lisi'
}

function updateAge() {
    age.value += 1
}


</script>

<style scoped>

button {
    margin-right: 10px;
}
</style>
